import React from 'react';
import { Container, Typography, Box, Button, Card, CardContent, Chip, Paper, GridLegacy as Grid2 } from '@mui/material';
import { useNavigate } from 'react-router-dom';

const GameLobbyPage: React.FC = () => {
  const navigate = useNavigate();

  // 模拟的游戏房间数据
  const gameRooms = [
    { id: 1, name: '新手房间', players: 3, maxPlayers: 6, minBuyIn: 100, maxBuyIn: 1000 },
    { id: 2, name: '中级房间', players: 5, maxPlayers: 6, minBuyIn: 500, maxBuyIn: 5000 },
    { id: 3, name: '高级房间', players: 2, maxPlayers: 6, minBuyIn: 1000, maxBuyIn: 10000 },
  ];

  const handleJoinRoom = (roomId: number) => {
    navigate(`/game/${roomId}`);
  };

  return (
    <Container maxWidth="lg">
      <Box sx={{ my: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          游戏大厅
        </Typography>
        <Typography variant="body1" color="textSecondary" paragraph>
          选择一个房间加入游戏
        </Typography>

        <Grid2 container spacing={3}>
        {gameRooms.map((room) => (
          <Grid2 xs={12} sm={6} md={4} key={room.id}>
              <Card>
                <CardContent>
                  <Typography variant="h5" component="h2">
                    {room.name}
                  </Typography>
                  <Typography color="textSecondary">
                    玩家: {room.players}/{room.maxPlayers}
                  </Typography>
                  <Typography variant="body2" component="p">
                    最小买入: ${room.minBuyIn}
                  </Typography>
                  <Typography variant="body2" component="p">
                    最大买入: ${room.maxBuyIn}
                  </Typography>
                  <Button
                    variant="contained"
                    color="primary"
                    sx={{ mt: 2 }}
                    onClick={() => handleJoinRoom(room.id)}
                    disabled={room.players >= room.maxPlayers}
                  >
                    {room.players >= room.maxPlayers ? '房间已满' : '加入房间'}
                  </Button>
                </CardContent>
          </Card>
        </Grid2>
        ))}</Grid2>
      </Box>
    </Container>
  );
};

export default GameLobbyPage;